import { CONFIG } from '@/constants';
import { getRateList } from '@/servers/api/order';
import { toImages } from '@/utils';
import { FormattedMessage, useIntl } from '@umijs/max';
import {
    Avatar,
    Button,
    Descriptions,
    Flex,
    Modal,
    Rate,
    Space,
    Table,
    Tabs,
} from 'antd';
import { DescriptionsItemType } from 'antd/es/descriptions';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
const Critic: React.FC = () => {
    const intl = useIntl();
    const [dataSource, setdataSource] = useState([]); //表格
    const [isModalOpen, setisModalOpen] = useState(false);
    const [detailInfo, setDetailInfo] = useState<Array<DescriptionsItemType>>();
    //详情
    function details(row: any) {
        setisModalOpen(true);
        setDetailInfo([
            {
                key: '1',
                span: 4,
                label: <FormattedMessage id="发布人"></FormattedMessage>,
                children: (
                    <Flex align="center">
                        <Avatar
                            style={{ verticalAlign: 'middle' }}
                            src={
                                <img
                                    src={
                                        CONFIG.IMAGE_URL + row.from_user.avatar
                                    }
                                    alt="avatar"
                                />
                            }
                        />
                        <div>
                            {
                                row.from_user[
                                    intl.formatMessage({
                                        id: 'item.user.username',
                                    })
                                ]
                            }
                        </div>
                    </Flex>
                ),
            },
            {
                key: '2',
                span: 4,
                label: <FormattedMessage id="发布时间"></FormattedMessage>,
                children: dayjs(row.createtime * 1000).format(
                    'YYYY-MM-DD HH:mm:ss',
                ),
            },
            {
                key: '5',
                span: 4,
                label: '',
                children: (
                    <>
                        <Rate
                            disabled
                            defaultValue={parseInt(row.total_score)}
                        />
                    </>
                ),
            },
            {
                key: '4',
                span: 4,
                label: <FormattedMessage id="其他信息"></FormattedMessage>,
                children: <>{row.show_text}</>,
            },
            {
                key: '3',
                span: 8,
                label: <FormattedMessage id="内容"></FormattedMessage>,
                children: <>{row.content}</>,
            },
        ]);
    }
    const columns = [
        {
            title: <FormattedMessage id="发布人"></FormattedMessage>,
            key: 'username',
            render: (text, record) => (
                <>
                    {
                        record.from_user[
                            intl.formatMessage({ id: 'item.user.username' })
                        ]
                    }
                </>
            ),
        },
        {
            title: <FormattedMessage id="头像"></FormattedMessage>,
            key: 'avatar',
            render: (text, record) => (
                <>
                    <Avatar
                        src={
                            <img
                                src={toImages(record.from_user.avatar)}
                                alt="avatar"
                            />
                        }
                    />
                </>
            ),
        },
        {
            title: <FormattedMessage id="发布时间"></FormattedMessage>,
            key: 'createtime',
            render: (text, record) => (
                <>
                    {dayjs(record.createtime * 1000).format(
                        'YYYY-MM-DD HH:mm:ss',
                    )}
                </>
            ),
        },
        {
            title: <FormattedMessage id="内容"></FormattedMessage>,
            key: 'content',
            ellipsis: true,
            render: (text, record) => <>{record.content}</>,
        },
        {
            title: <FormattedMessage id="其他信息"></FormattedMessage>,
            key: 'show_text',
            ellipsis: true,
            render: (text, record) => <>{record.show_text}</>,
        },
        {
            title: <FormattedMessage id="操作"></FormattedMessage>,
            key: 'action',
            width: 100,
            render: (text, record) => (
                <Space size="middle">
                    <Button
                        type="primary"
                        ghost
                        size="small"
                        onClick={() => {
                            details(record);
                        }}
                    >
                        <FormattedMessage id="查看详情"></FormattedMessage>
                    </Button>
                </Space>
            ),
        },
    ];
    const [tableparams, settableparams] = useState({
        page: 1,
        size: 10,
        type: 1,
    });
    function goodsList(params: any) {
        const qParams = {
            ...params,
        };
        getRateList({ ...qParams }).then((res) => {
            settableparams(params);
            setdataSource(res.data);
        });
    }
    const [currentTab, setCurrentTab] = useState(1);
    const items = [
        {
            key: 1,
            label: <FormattedMessage id="我发布的"></FormattedMessage>,
        },
        {
            key: 2,
            label: <FormattedMessage id="我参与的"></FormattedMessage>,
        },
    ];
    function onChange(val: number) {
        setCurrentTab(val);
        goodsList({ ...tableparams,type:val });
    }
    useEffect(() => {
        (async () => {
            goodsList({ ...tableparams });
        })();
    }, []);
    return (
        <>
            <Tabs
                defaultActiveKey={currentTab}
                items={items}
                onChange={onChange}
            />
            <Table dataSource={dataSource} rowKey="id" columns={columns} />
            <Modal
                width={1000}
                title={intl.formatMessage({ id: '内容' })}
                open={isModalOpen}
                onCancel={() => {
                    setisModalOpen(false);
                }}
                cancelText={intl.formatMessage({ id: '关闭' })}
                okButtonProps={{ style: { display: 'none' } }}
            >
                <Descriptions
                    style={{ marginTop: 30 }}
                    items={detailInfo}
                    column={8}
                />
            </Modal>
        </>
    );
};
export default Critic;
